<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/solution/video_banner.png')] bg-image-base"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">视频监控系统</h1>
        <p class="banner-text xl:w-[35vw] mt-10">
          联筑达·智慧工地视频监控系统，在建筑工地施工现场、工作区及生活区布设视频监控系统，通过网络传输，可将作业场景实时传送到智慧工地监管平台。管理人员通过智慧工地监管平台PC端或手机小程序可直观掌控施工现场实时状况，并跟踪施工进度，加强对工地人员行为规范监督，减少安全隐患，保证工地安全生产。
        </p>
      </div>
    </div>

    <div class="pt-[70px] pb-20">
      <div class="module-con">
        <h2 class="module-title">功能特点</h2>
        <div class="flex flex-wrap mt-10 justify-center">
          <div
            v-for="(item, ind) in traitList"
            :key="ind"
            class="w-[375px] md:mr-6 mb-6 relative text-center rounded-sm border pb-4 pt-9 px-9 border-[#EDF4FB] border-t-2 border-t-[#0099FF]"
          >
            <img
              class="inline-block"
              :src="
                require(`../../assets/images/solution/video_0${ind + 1}.png`)
              "
            />
            <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
            <p class="mt-[18px] text-[#828282] text-sm leading-6">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-[#FBFBFB] py-[84px]">
      <div class="module-con">
        <h2 class="module-title">系统优势</h2>
        <div class="flex mt-10 text-white">
          <div class="bg-[#028BFF] w-1/3 p-5 md:p-10 xl:p-14">
            <img
              class="w-10 h-10"
              src="~/assets/images/solution/video_system_01.png"
            />
            <p class="mt-[27px]">全天24小时监控， 保护工地现场生命及财产安全</p>
          </div>
          <div
            class="bg-[url('~/assets/images/solution/video_system_center.png')] w-1/3 h-[283px] p-5 md:p-10 xl:p-14"
          >
            <img
              class="w-10 h-10"
              src="~/assets/images/solution/video_system_02.png"
            />
            <p class="mt-[27px]">
              实时监控，远程督查，满足多级管理需求，提高管理效率
            </p>
          </div>
          <div class="bg-[#028BFF] w-1/3 h-[283px] p-5 md:p-10 xl:p-14">
            <img
              class="w-10 h-10"
              src="~/assets/images/solution/video_system_03.png"
            />
            <p class="mt-[27px]">多路图像集中管理，可对讲、报警、远程控制</p>
          </div>
        </div>
      </div>
    </div>

    <div
      class="pt-[90px] pb-[109px] bg-[url('../../assets/images/solution/video_ hardware_banner.png')] bg-image-base"
    >
      <div class="module-con">
        <h2 class="module-title">硬件产品</h2>
        <div class="flex mt-10 space-x-[60px]">
          <div
            class="w-40 h-[47px] rounded-3xl scale-75 md:scale-100 flex flex-center border border-[#0E93FF] text-[#0E93FF]"
            :class="{ 'bg-[#0E93FF] !text-white': !hardwareCurrent }"
            @click="hardwareCurrent = 0"
          >
            球机
          </div>
          <div
            class="w-40 h-[47px] rounded-3xl scale-75 md:scale-100 flex flex-center border border-[#0E93FF] text-[#0E93FF]"
            :class="{ 'bg-[#0E93FF] !text-white': hardwareCurrent }"
            @click="hardwareCurrent = 1"
          >
            枪机
          </div>
        </div>
        <div class="mt-10">
          <div
            v-if="!hardwareCurrent"
            class="pl-[24%] rounded shadow pr-[9%] relative py-[30px] bg-gradient-to-t from-[#F8FEFF] to-[#FFFFFF]"
          >
            <img
              alt="视频监控系统"
              class="absolute top-[33px] left-7 md:left-[60px] w-[7.7vw]"
              src="../../assets/images/solution/video_product_01.png"
            />
            <img
              class="absolute top-[33px] right-[77px] w-[3.18vw]"
              src="../../assets/images/icon_ quotation.png"
            />
            <div>
              <h3 class="text-gray-700 font-medium">400万6寸网络高清球机</h3>
              <p
                class="mt-[9px] text-[#828282] text-sm leading-7 whitespace-pre-line"
              >
                支持23倍光学变倍，16倍数字变倍，最大支持256GB microSD卡存储
                IP66，抗干扰能力强，适用于严酷的电磁环境，符合GB/T17626.2/3/4/5/6四级标准采用高效补光阵列，低功耗，红外补光150m
                支持区域入侵侦测，越界侦测，进入区域侦测和离开区域侦测等智能侦测
              </p>
              <h3 class="text-gray-700 font-medium mt-5">200万6寸球机摄像机</h3>
              <p
                class="mt-[9px] text-[#828282] text-sm leading-7 whitespace-pre-line"
              >
                支持20倍光学变倍，16倍数字变倍，最大支持256GB microSD卡存储
                IP66，抗干扰能力强，适用于严酷的电磁环境，符合GB/T17626.2/3/4/5/6四级标准采用高效补光阵列，低功耗，红外补光150m
                支持区域入侵侦测，越界侦测，进入区域侦测和离开区域侦测等智能侦测
              </p>
            </div>
          </div>
          <div
            v-else
            class="pl-[24%] mt-5 rounded shadow pr-[9%] relative py-[30px] bg-gradient-to-t from-[#F8FEFF] to-[#FFFFFF]"
          >
            <img
              class="absolute top-[33px] left-[26px] w-[10.5vw]"
              src="../../assets/images/solution/video_product_02.png"
            />
            <img
              class="absolute top-[33px] right-[77px] w-[3.18vw]"
              src="../../assets/images/icon_ quotation.png"
            />
            <div>
              <h3 class="text-gray-700 font-medium">
                型号标准：DS-IPC-B12HV2-IA / DS-IPC-B12HV2-IA POE
              </h3>
              <p
                class="mt-[9px] text-[#828282] text-sm leading-7 whitespace-pre-line"
              >
                符合IP66防尘防水设计，可靠性高 内置1个麦克风，高清拾音
                采用高效阵列红外灯，使用寿命长，红外照射距离最远可达50 m
                支持背光补偿，3D数字降噪，数字宽动态，适应不同监控环境
                最高分辨率可达1920 × 1080 @25
                fps，在该分辨率下可输出实时图像下可输出实时图像
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pt-[84px] pb-16 bg-[#FBFBFB]">
      <div class="module-con">
        <h2 class="module-title">应用效果</h2>
        <div class="flex flex-wrap mt-10 justify-between">
          <div class="effect-item">
            <img
              class="w-full h-full"
              src="../../assets/images/solution/video_effect_01.png"
            />
          </div>
          <div class="effect-item">
            <img
              class="w-full h-full"
              src="../../assets/images/solution/video_effect_02.png"
            />
          </div>
          <div class="effect-item">
            <img
              class="w-full h-full"
              src="../../assets/images/solution/video_effect_03.png"
            />
          </div>
          <div class="effect-item">
            <img
              class="w-full h-full"
              src="../../assets/images/solution/video_effect_04.png"
            />
          </div>
          <div class="effect-item">
            <img
              class="w-full h-full"
              src="../../assets/images/solution/video_effect_05.png"
            />
          </div>
          <div class="effect-item">
            <img
              class="w-full h-full"
              src="../../assets/images/solution/video_effect_06.png"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          name: '全面监控',
          content:
            '球机和枪机摄像头组合联动，监控范围更大、更灵活，可以多项目现场进行360°无死角覆盖监控。',
        },
        {
          name: '移动跟踪',
          content:
            '可通过智慧工地监管平台，远程操控监控设备，随意调整监控角度，对项目现场进行移动跟踪，捕获更多画面细节。',
        },
        {
          name: '云端储存',
          content:
            '采用无线传输技术，通过视频设备对施工现场进行数据采集，经过网络将信息传送到监管平台，实现前端固定设备与移动数据相结合。',
        },
        {
          name: '无线传输',
          content:
            '监控网络可采用多种布网方式，在无法布设有线传输线路的情况下，可将各监测点摄像机由WIFI、4G/5G蜂窝网络或微波无线信号接入互联网。',
        },
        {
          name: '灵活管理',
          content:
            '可查看指定项目的视频设备在离线、异常状态，设备数量，实现定向监控。可对录像进行储存、检索和回放，随时随地监控施工现场情况，并实现可追溯管理。',
        },
        {
          name: '可延展性',
          content:
            '如需添加新的监控点，只要在网络上添加新的监控摄像机即可。同时还可添加红外、烟感等安防探测器以及声光报警设备，与视频监控构成报警联动机制。',
        },
      ],
      hardwareCurrent: 0,
    }
  },
  head: {
    title: '视频监控系统-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '视频监控系统',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联筑达·智慧工地视频监控系统，在建筑工地施工现场、工作区及生活区布设视频监控系统，通过网络传输，可将作业场景实时传送到智慧工地监管平台。管理人员通过智慧工地监管平台PC端或手机小程序可直观掌控施工现场实时状况，并跟踪施工进度，加强对工地人员行为规范监督，减少安全隐患，保证工地安全生产。',
      },
    ],
  },
}
</script>

<style scoped>
.effect-item {
  width: 32%;
  @apply mb-6;
}
</style>
